<template>
  <div class="box">
    <el-col :span="3">
      <el-menu
        :default-active="menuCurrentView"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        @select="handleSelect"
      >
        <el-menu-item index="demand1">
          <span>表格组件使用</span>
        </el-menu-item>
        <el-menu-item index="demand2">
          <span>表单组件使用</span>
        </el-menu-item>
        <el-menu-item index="demand3">
          <span>项目使用</span>
        </el-menu-item>
        <el-menu-item index="demand4">
          <span>表格表单使用</span>
        </el-menu-item>
      </el-menu>
    </el-col>
    <div class="content">
      <div class="breadcrumb">elUI > {{ currentName }}</div>
      <div class="comBox">
        <component v-bind:is="currentView" @changeComponent="changeCurrentView" :state="state">
        </component>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import demand1 from './demand1/index.vue'
import demand2 from './demand2/index.vue'
import demand3 from './demand3/index.vue'
import demand4 from './demand4/index.vue'
const state = ref({
  // formOptions: 100
})
const currentView = ref(demand1)
const menuCurrentView = ref('demand1')
const currentName = ref('表格组件使用')
const tabComponents = ref({
  demand1: demand1,
  demand3: demand3,
  demand4: demand4,
  demand2: demand2
})
const handleSelect = item => {
  // 写成下面这种不会渲染出组件,因为v-bind:is="currentView"中的currentView需为组件数据
  // currentView.value = item
  let obj = {
    demand1: '表格组件使用',
    demand2: '表单组件使用'
  }
  currentName.value = obj[item]
  currentView.value = tabComponents.value[item]
  state.value = {}
}

const changeCurrentView = item => {
  menuCurrentView.value = item.title
  currentView.value = tabComponents.value[item.title]
  switch (item.title) {
    case 'demand1':
      state.value = {}
      state.value.data = item.data
      break
    case 'demand2':
      state.value = {}
      state.value.formOptions = item.formOptions
      state.value.formData = item.formData
      state.value.title = item.title
      break
  }
}
</script>
<style lang="scss" scoped>
.box {
  height: calc(100vh - 86px);
  display: flex;
}
.el-menu {
  height: calc(100vh - 64px);
}
.content {
  display: flex;
  flex-direction: column;
  margin: 10px;
  padding: 10px;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.breadcrumb {
  margin-bottom: 20px;
  font-weight: 600;
}
.comBox {
  flex: 1;
  overflow: hidden;
  overflow-y: scroll;
}
</style>
